<template>
  <div class="hotel-store-settings">
    <div class="page-header">
      <a-typography-title :heading="4">店铺设置</a-typography-title>
      <p class="text-gray-500">管理您的酒店店铺信息和各项设置</p>
    </div>

    <a-card class="content-card">
      <a-form :model="formData" layout="vertical">
        <!-- 基本信息 -->
        <div class="section-header">
          <a-typography-title :heading="5" style="margin: 0"
            >基本信息</a-typography-title
          >
          <p class="text-gray-500">设置店铺的基本信息</p>
        </div>
        <div class="form-grid">
          <a-form-item
            field="storeName"
            label="店铺名称"
            validate-trigger="blur"
            required
          >
            <a-input
              v-model="formData.storeName"
              placeholder="请输入店铺名称"
              allow-clear
            />
          </a-form-item>
          <a-form-item field="contactPhone" label="联系电话" required>
            <a-input
              v-model="formData.contactPhone"
              placeholder="请输入联系电话"
              allow-clear
            />
          </a-form-item>
        </div>
        <a-form-item field="storeDesc" label="店铺简介">
          <a-textarea
            v-model="formData.storeDesc"
            placeholder="请输入店铺简介，建议60-200字"
            :max-length="200"
            show-word-limit
            allow-clear
          />
        </a-form-item>
        <a-form-item field="address" label="详细地址" required>
          <a-input
            v-model="formData.address"
            placeholder="请输入详细地址"
            allow-clear
          />
        </a-form-item>

        <!-- 资质信息 -->
        <div class="section-header">
          <a-typography-title :heading="5" style="margin: 0"
            >资质信息</a-typography-title
          >
          <p class="text-gray-500">上传店铺的营业资质证照</p>
        </div>
        <div class="license-grid">
          <a-form-item field="businessLicense" label="营业执照" required>
            <a-upload
              list-type="picture-card"
              :file-list="formData.businessLicense"
              :limit="1"
              @change="handleBusinessLicenseChange"
            >
              <template #upload-button>
                <div class="upload-button">
                  <icon-plus />
                  <div class="mt-2">上传营业执照</div>
                </div>
              </template>
            </a-upload>
          </a-form-item>
          <a-form-item field="hotelLicense" label="特种行业许可证" required>
            <a-upload
              list-type="picture-card"
              :file-list="formData.hotelLicense"
              :limit="1"
              @change="handleHotelLicenseChange"
            >
              <template #upload-button>
                <div class="upload-button">
                  <icon-plus />
                  <div class="mt-2">上传特种行业许可证</div>
                </div>
              </template>
            </a-upload>
          </a-form-item>
          <a-form-item field="hygieneLicense" label="卫生许可证" required>
            <a-upload
              list-type="picture-card"
              :file-list="formData.hygieneLicense"
              :limit="1"
              @change="handleHygieneLicenseChange"
            >
              <template #upload-button>
                <div class="upload-button">
                  <icon-plus />
                  <div class="mt-2">上传卫生许可证</div>
                </div>
              </template>
            </a-upload>
          </a-form-item>
        </div>

        <!-- 经营信息 -->
        <div class="section-header">
          <a-typography-title :heading="5" style="margin: 0"
            >经营信息</a-typography-title
          >
          <p class="text-gray-500">设置店铺的经营时间和服务设施</p>
        </div>
        <div class="form-grid">
          <a-form-item field="openTime" label="营业时间">
            <div class="time-range">
              <a-time-picker
                v-model="formData.openTime"
                style="width: 200px"
                placeholder="开始时间"
              />
              <span class="mx-2">至</span>
              <a-time-picker
                v-model="formData.closeTime"
                style="width: 200px"
                placeholder="结束时间"
              />
            </div>
          </a-form-item>
          <a-form-item field="checkInTime" label="入住时间">
            <div class="time-range">
              <a-time-picker
                v-model="formData.checkInTime"
                style="width: 200px"
                placeholder="入住时间"
              />
              <span class="mx-2">至</span>
              <a-time-picker
                v-model="formData.checkOutTime"
                style="width: 200px"
                placeholder="退房时间"
              />
            </div>
          </a-form-item>
        </div>
        <a-form-item field="facilities" label="酒店设施">
          <a-select
            v-model="formData.facilities"
            placeholder="请选择酒店设施"
            multiple
            allow-clear
          >
            <a-option value="wifi">免费WiFi</a-option>
            <a-option value="parking">免费停车</a-option>
            <a-option value="restaurant">餐厅</a-option>
            <a-option value="gym">健身房</a-option>
            <a-option value="pool">游泳池</a-option>
            <a-option value="meeting">会议室</a-option>
            <a-option value="spa">SPA</a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="services" label="酒店服务">
          <a-select
            v-model="formData.services"
            placeholder="请选择酒店服务"
            multiple
            allow-clear
          >
            <a-option value="24hours">24小时前台</a-option>
            <a-option value="luggage">行李寄存</a-option>
            <a-option value="wakeup">叫醒服务</a-option>
            <a-option value="roomService">客房服务</a-option>
            <a-option value="laundry">洗衣服务</a-option>
            <a-option value="shuttle">接送服务</a-option>
          </a-select>
        </a-form-item>

        <!-- 提交按钮 -->
        <div class="submit-buttons">
          <a-space>
            <a-button type="primary" @click="handleSubmit" size="large">
              <template #icon><icon-save /></template>
              保存设置
            </a-button>
            <a-button @click="handleReset" size="large">
              <template #icon><icon-refresh /></template>
              重置
            </a-button>
          </a-space>
        </div>
      </a-form>
    </a-card>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { Message } from "@arco-design/web-vue";
import { IconPlus, IconSave, IconRefresh } from "@arco-design/web-vue/es/icon";

const formData = ref({
  storeName: "",
  storeDesc: "",
  contactPhone: "",
  address: "",
  businessLicense: [],
  hotelLicense: [],
  hygieneLicense: [],
  openTime: null,
  closeTime: null,
  checkInTime: null,
  checkOutTime: null,
  facilities: [],
  services: [],
});

// 处理营业执照上传
const handleBusinessLicenseChange = (fileList) => {
  formData.value.businessLicense = fileList;
};

// 处理特种行业许可证上传
const handleHotelLicenseChange = (fileList) => {
  formData.value.hotelLicense = fileList;
};

// 处理卫生许可证上传
const handleHygieneLicenseChange = (fileList) => {
  formData.value.hygieneLicense = fileList;
};

// 提交表单
const handleSubmit = async () => {
  try {
    // TODO: 实现保存逻辑
    Message.success("保存成功");
  } catch (error) {
    Message.error("保存失败");
  }
};

// 重置表单
const handleReset = () => {
  formData.value = {
    storeName: "",
    storeDesc: "",
    contactPhone: "",
    address: "",
    businessLicense: [],
    hotelLicense: [],
    hygieneLicense: [],
    openTime: null,
    closeTime: null,
    checkInTime: null,
    checkOutTime: null,
    facilities: [],
    services: [],
  };
  Message.info("已重置所有设置");
};
</script>

<style lang="less" scoped>
.hotel-store-settings {
  padding: 20px;

  .page-header {
    margin-bottom: 24px;

    :deep(.arco-typography) {
      margin: 0;
    }

    // 添加黑夜模式文字颜色
    .text-gray-500 {
      @apply dark:text-gray-300;
    }
  }

  .content-card {
    background-color: var(--color-bg-2);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

    :deep(.arco-card-body) {
      padding: 24px;
    }

    // 添加黑夜模式文字颜色
    :deep(.arco-form-item-label) {
      @apply dark:text-white;
    }

    :deep(.arco-input),
    :deep(.arco-textarea),
    :deep(.arco-select-view),
    :deep(.arco-time-picker) {
      @apply dark:text-white dark:bg-gray-700;
    }

    :deep(.arco-select-option) {
      @apply dark:text-white;
    }
  }

  .section-header {
    margin: 24px 0 16px;

    &:first-child {
      margin-top: 0;
    }

    // 添加黑夜模式文字颜色
    :deep(.arco-typography) {
      @apply dark:text-white;
    }

    .text-gray-500 {
      @apply dark:text-gray-300;
    }
  }

  .form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
  }

  .license-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    margin-bottom: 24px;
  }

  .time-range {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .upload-button {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--color-text-3);
    transition: color 0.2s;

    &:hover {
      color: rgb(var(--primary-6));
    }
  }

  :deep(.arco-upload-list-item) {
    border-radius: 4px;
    overflow: hidden;
  }

  :deep(.arco-form-item-label) {
    font-weight: 500;
    @apply dark:text-white;
  }

  :deep(.arco-input-wrapper),
  :deep(.arco-select-view),
  :deep(.arco-textarea-wrapper) {
    &:hover {
      border-color: rgb(var(--primary-6));
    }
    @apply dark:border-gray-600;
  }

  .submit-buttons {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: center;

    // 添加黑夜模式按钮文字颜色
    :deep(.arco-btn) {
      @apply dark:text-white dark:border-gray-600;

      &.arco-btn-primary {
        @apply dark:border-primary-600;
      }
    }
  }
}
</style>
